

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>


<link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">



</head>
<body>



<div class="container" id="app">
            <h2 class="page-header">购物车</h2>
            <table class="table">
                <tr>
                    <th><label><input type="checkbox" @click="check_all" :checked="check_goods.length == cart_list.length"/>全选</label></th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(cart,index) in cart_list" :key="index">
                    <td><input type="checkbox" :value="cart" v-model="check_goods" /></td>
                    <td>{{cart.goods_name}}</td>
                    <td>{{cart.goods_price}}</td>
                    <td class="col-xs-3">
                        <span class="btn btn-default" v-on:click="reduce(cart)">-</span>
                        <input class="btn-group" type="number" v-model="cart.num" />
                        <span class="btn btn-default" v-on:click="add_num(cart)">+</span>
                    </td>
                    <td>
                        <button class="btn btn-danger" v-on:click="delete_num">删除</button>
                    </td>
                </tr>
            </table>
            <div>
                总计：共 {{cart_list.length}}件商品，已选择 {{total_num}} 件
                <div class="pull-right">
                    合计：{{total_price}}元
                    <a href="" class="btn btn-success" :disabled="check_goods.length <= 0">去结算</a>
                </div>
            </div>
        </div>






        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        cart_list: [{
                            goods_name: '小米6',
                            goods_price: '1699',
                            num: '2',
                        }, {
                            goods_name: '红米3',
                            goods_price: '699',
                            num: '1',
                        }, {
                            goods_name: '小米8',
                            goods_price: '2899',
                            num: '1',
                        }],
                        check_goods: [] //已选择的商品
                    }
                },



                methods: {
                    details: function () {
                        return this.site + " - 学的不仅是技术，更是梦想！";
                    },


                    //商品类减减
                    reduce(cart) {
                        if (cart.num <= 0) {
                            cart.num = 0
                        } else {
                            cart.num--
                        }
                    },
                    //商品累加
                    add_num(cart) {
                        cart.num++
                    },
                    //删除商品
                    delete_num(cart) {
                        this.check_goods.splice(this.check_goods.indexOf(cart), 1)
                        this.cart_list.splice(this.cart_list.indexOf(cart), 1)
                    },
                    //全选
                    check_all() {
                        if (this.check_goods.length > 0) {
                            this.check_goods = []
                        } else {
                            this.cart_list.forEach(item => {
                                this.check_goods.push(item)
                            })
                        }
                    }





                },



                computed: {
                    //总价
                    total_price() {
                        let price = 0 
                            this.check_goods.forEach(item => {
                                //总价 = 价格 * 数量
                                price += Number(item.goods_price) * Number(item.num)
                            })
                        return price
                    },
                    //数量
                    total_num() {
                        let t_num = 0;
                        this.check_goods.forEach(item => {
                            t_num += Number(item.num);
                        })
                        return t_num
                    }
                },
                


            })
        </script>

    </body>
    </html>
    
    
